<template>
      <a-form-item
      :class="[hasError ? 'hhg-form-item-has-error' : '']"
	:label="labelName"
	:name="name"
	:rules="rules">
            <!-- TreeSelect 树选择 -->
            <a-tree-select
                  v-model:value="hhgValue"
                  v-if="checkable"
                  class="depSelect"
                  :tree-data="hhgOptions"
                  tree-checkable
                  v-bind="attrs"
                  :show-checked-strategy="SHOW_PARENT"
                  tree-node-filter-prop="value"/>
            <!-- 下拉框 -->
            <a-select v-model:value="hhgValue" v-bind="attrs" class="hhSelect" :options="hhgOptions" v-else>
            </a-select>
            
      </a-form-item>
</template>

<script setup>
import { onMounted, defineProps, ref, useAttrs, watch } from 'vue'
import _ from 'lodash'
//父组件传过来的值
const props = defineProps({
      value: Array || String,
	config: {
            type: Object,
            default: ()=> {}
      },
      options: {
            type: Array,
            default: ()=> []
      }
})
const hhgValue = ref(props.value)
const labelName = ref(props.config.labelName)
const name = ref(props.config.name)
const rules = ref(props.config.rules)
const checkable = ref(props.config.checkable)
const hasError = ref(props.config.hasError ? props.config.hasError : false)
const hhgOptions = ref(props.options)
//属性穿透
const attrs = useAttrs()
// const emit = defineEmits(['update:modelValue'])
//
watch(() => props.value, (val) => {
      if (!_.isEmpty(val)) {
            hhgValue.value = val
      }
}, { immediate: true }, { deep: true })
watch(() => props.options, (val) => {
      if (!_.isEmpty(val)) {
            hhgOptions.value = val
      }
}, { immediate: true }, { deep: true })
// mounted
onMounted(() => {
})

</script>
<style scoped lang="scss">
</style>